<template>
    <div class="app-container">
        <el-row class="personal-box">
            <el-col :span="4" class="personal-sidebar">
                <div class="title">
                    <span class="tag-blue bgBlue mr_10"></span>
                    <span>个人信息</span>
                </div>
                <div>
                    <div class="text-center">
                        <userAvatar :user="user" />
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item">
                            <span class="label">姓名:</span>
                            <div class="pull-right">{{ user.userName }}</div>
                        </li>
                        <li class="list-group-item">
                            <span class="label">手机号码:</span>
                            <div class="pull-right">{{ user.phonenumber }}</div>
                        </li>
                        <li class="list-group-item">
                            <span class="label">用户邮箱:</span>
                            <div class="pull-right">{{ user.email }}</div>
                        </li>
                        <li class="list-group-item">
                            <span class="label">所属部门:</span>
                            <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
                        </li>
                        <li class="list-group-item">
                            <span class="label">所属角色:</span>
                            <div class="pull-right">{{ roleGroup }}</div>
                        </li>
                        <li class="list-group-item">
                            <span class="label">创建日期:</span>
                            <div class="pull-right">{{ user.createTime }}</div>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="20" class="personal-main">
                <div class="content">
                    <el-tabs v-model="activeTab" type="card" class="person-tab">
                        <el-tab-pane label="用户信息" name="userinfo">
                            <userInfo :user="user" ref="userinfo" />
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="resetPwd">
                            <resetPwd :user="user" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import userAvatar from '@/views/personInfo/index'
import userInfo from './userInfo'
import resetPwd from './resetPwd'
export default {
    components: {
        userAvatar,
        userInfo,
        resetPwd
    },
    data() {
        return {
            user: this.$store.getters.user,
            roleGroup: {},
            postGroup: {},
            activeTab: 'userinfo'
        }
    },
    created() {
        // this.getInfo()
    },
    methods: {
        getInfo() {
            this.$store.dispatch('GetInfo').then((res) => {
                this.user = res.data.user
                console.log(res)
            })
        }
    }
}
</script>
<style scoped lang="scss"></style>
